<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>这是首页</h1>
  <p>访问量: <span></span></p>
  <ul>
    
  </ul>

  <script>
    // 报错：Access-Control-Allow-Origin
    // 跨域报错
    // 浏览器的同源策略引起的（浏览器的安全限制）
    // 当前端的url地址和后端的url地址，有协议/域名/端口号有一个不同，那么请求就会被浏览器阻止

    // 解决跨域
    // 1. jsonp: 模拟script标签的方式去获取数据。用的比较少了，只能获取get的请求，无法获取post的请求
    // 2. cors: 后端的方式解决, 让后端这里允许所有人获取自己的数据
    // 3. 反向代理
    fetch("http://127.0.0.1:3000/api/homedata")
      .then(response => response.json())
      .then(res => {
        console.log(res.visitCount);
        document.querySelector("span").innerHTML = res.visitCount;
      })

    fetch("http://127.0.0.1:3000/api/listdata")
      .then(response => response.json())
      .then(res => {
        console.log(res);
        if (res.success) {
          let str = "";
          res.list.forEach(item => {
            str += `<li>id: ${item.id}; name: ${item.name}</li>`
          })
          document.querySelector("ul").innerHTML = str;
        }
      })
  </script>
</body>
</html>